<!--
* @author wn
* @date 2022/08/18 11:11:00
* @description: 对话框组件  标题 传值 内容 footer 传递插槽 改变
* 如何关闭  打开
* 父组件传值 双向绑定 isOpen  父组件 点击 true  点击其他区域 false
*                          自身    点击 X 或取消  emit  false
!-->
<template>
	<!-- xtx-confirm wrapper 需要同时做动画  transition 包裹 无法实现
   这里 使用原始的  添加类名 实现过渡动画效果 -->
	<div class="xtx-dialog" :class="{ fade }" v-if="modelValue">
		<div class="wrapper" :class="{ fade }" ref="target">
			<div class="header">
				<h3>{{ title }}</h3>
				<a
					@click="close"
					href="javascript:;"
					class="iconfont icon-close-new"
				></a>
			</div>
			<div class="body">
				<!-- 默认插槽 -->
				<slot />
			</div>
			<div class="footer">
				<!-- 具名插槽 -->
				<slot name="footer" />
			</div>
		</div>
	</div>
</template>
<script>
import { onClickOutside, useVModel } from '@vueuse/core'
import { ref, watch } from 'vue'
export default {
	name: 'XtxDialog',
	props: {
		title: {
			type: String,
			default: '切换收货地址',
		},
		modelValue: {
			type: Boolean,
			default: false,
		},
		// 控制 被覆盖时  close 同步父组件 true   城市组件
		topCover: {
			type: Boolean,
			default: false,
		},
	},
	setup(props, { emit }) {
		const fade = ref(false)
		// 对话框外面  点击 消失
		const target = ref(null)
		onClickOutside(target, () => close())
		const value = useVModel(props, 'modelValue', emit)
		const close = () => {
			// emit('update:modelValue', false)
			if (props.topCover) return
			value.value = false
		}
		/**
		 * 监视 modelValue 变化  实现动画效果
		 * 组件显示的同时 添加类名  不会触发 动画效果
		 * 类名的变化  需要延时触发才会生效
		 * 做测试  直接设置true 需要 immediate: true
		 */
		watch(
			() => value.value,
			newValue => {
				setTimeout(() => {
					fade.value = newValue
				}, 0)
			},
			{
				immediate: true,
			}
		)
		return { fade, target, close }
	},
}
</script>
<style scoped lang="less">
.xtx-dialog {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0);
	//
	z-index: 8887;
	&.fade {
		background: rgba(0, 0, 0, 0.5);
		transition: all 0.6s;
	}
	.wrapper {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -80%);
		opacity: 0;
		width: 600px;
		background: #fff;
		border-radius: 4px;

		&.fade {
			transform: translate(-50%, -50%);
			opacity: 1;
			transition: all 0.6s;
		}
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 70px;
			line-height: 70px;
			padding: 0 20px;
			border-bottom: 1px solid #f5f5f5;
			h3 {
				font-weight: normal;
				font-size: 18px;
			}
			a {
				width: 25px;
				height: 25px;
				line-height: 25px;
				border-radius: 50%;
				margin-right: 26px;
				font-size: 20px;
				color: #999;
				border: 1px solid @xtxColor;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
				padding: 0 2px;
				&:hover {
					color: #666;
				}
			}
		}
		.body {
			max-height: 340px;
			// 自动滚动
			overflow: auto;
			// 滚动条样式
			&::-webkit-scrollbar {
				width: 10px;
				height: 10px;
			}
			// 滚动条轨道
			&::-webkit-scrollbar-track {
				background: #f8f8f8;
				border-radius: 2px;
			}
			// 滚动条
			&::-webkit-scrollbar-thumb {
				background: #eee;
				border-radius: 10px;
			}
			// 滚动条悬浮
			&::-webkit-scrollbar-thumb:hover {
				background: #ccc;
			}
			padding: 20px 40px;
			font-size: 16px;
		}
		.footer {
			text-align: center;
			padding: 10px 0 30px 0;
		}
	}
}
</style>
